<template>
     <vue-crop  @crop-upload-success="uploadSuccess"
                v-model="show"
                :width="width"
                :height="height"
                :url="uploadUrl"
                :field="fileName"
                img-format="png"></vue-crop>
</template>

<script>
    import VueCrop from 'vue-image-crop-upload/upload-2.vue'
    export default{
      props: {
        value: {
          type: Boolean
        },
        width: {
          type: Number,
          default: 200
        },
        height: {
          type: Number,
          default: 200
        },
        // *上传图片的地址*/
        uploadUrl: {
          type: String
        },
        // *上传图片的file控件name*/
        fileName: {
          type: String
        }
      },
      data () {
        return {
          show: false
        }
      },
      mounted () {
        this.show = this.value
      },
      components: {
        VueCrop
      },
      methods: {
        uploadSuccess (res, field) {
          this.$emit('uploadSuccess', res)
        }
      },
      watch: {
        value (newv) {
          this.show = newv
        },
        show (newv) {
          if (!this.show) {
            this.$emit('input', false)
          }
        }
      }
    }
</script>

<style>
</style>
